<template>
  <div class="ai-report-floating">
    <!-- 悬浮图标 -->
    <div 
      class="floating-icon" 
      @click="togglePanel"
      :class="{ 'active': isOpen }"
      v-if="!isOpen"
    >
      <svg class="icon-svg" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
        <path d="M 512 64 C 264.6 64 64 264.6 64 512 s 200.6 448 448 448 s 448 -200.6 448 -448 S 759.4 64 512 64 z m 0 820 c -205.4 0 -372 -166.6 -372 -372 s 166.6 -372 372 -372 s 372 166.6 372 372 s -166.6 372 -372 372 z" fill="#1890ff"/>
        <path d="M 623.6 316.7 C 593.6 290.4 554 276.2 512 276.2 c -165.4 0 -299.4 134 -299.4 299.4 S 346.6 875 512 875 c 165.4 0 299.4 -134 299.4 -299.4 c 0 -42 -8.4 -81.6 -23.6 -118.1 h -66.1 c 12.2 32.6 19 68.1 19 105.1 c 0 165.4 -134 299.4 -299.4 299.4 s -299.4 -134 -299.4 -299.4 s 134 -299.4 299.4 -299.4 c 42 0 81.6 8.4 118.1 23.6 v -66.1 z" fill="#1890ff"/>
        <path d="M 761.4 209.3 L 512 458.7 l -113.2 -113.2 l -45.2 45.2 L 512 549.1 l 294.6 -294.6 z" fill="#52c41a"/>
      </svg>
      <div class="floating-text">AI报表</div>
    </div>

    <!-- AI报表面板 -->
    <transition name="slide-up">
      <div v-if="isOpen" class="ai-report-panel">
        <!-- 面板头部 -->
        <div class="panel-header">
          <div class="header-left">
            <svg class="header-icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
              <path d="M 512 64 C 264.6 64 64 264.6 64 512 s 200.6 448 448 448 s 448 -200.6 448 -448 S 759.4 64 512 64 z" fill="#1890ff"/>
            </svg>
            <div class="header-title">
              <h3>AI智能报表分析</h3>
              <p>RAGflow驱动</p>
            </div>
          </div>
          <div class="header-actions">
            <button class="action-btn" @click="minimizePanel" title="最小化">
              <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
                <path d="M 128 512 h 768" stroke="currentColor" stroke-width="80"/>
              </svg>
            </button>
            <button class="action-btn close-btn" @click="closePanel" title="关闭">
              <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
                <path d="M 195.2 195.2 l 633.6 633.6 M 828.8 195.2 l -633.6 633.6" stroke="currentColor" stroke-width="80"/>
              </svg>
            </button>
          </div>
        </div>

        <!-- RAGflow内容区域 -->
        <div class="panel-content">
          <div v-if="isLoading" class="loading-container">
            <div class="loading-spinner"></div>
            <p>正在连接RAGflow服务...</p>
            <small>{{ ragflowUrl }}</small>
          </div>

          <div v-if="hasError" class="error-container">
            <svg class="error-icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
              <path d="M 512 64 C 264.6 64 64 264.6 64 512 s 200.6 448 448 448 s 448 -200.6 448 -448 S 759.4 64 512 64 z m 0 820 c -205.4 0 -372 -166.6 -372 -372 s 166.6 -372 372 -372 s 372 166.6 372 372 s -166.6 372 -372 372 z" fill="#ff4d4f"/>
              <path d="M 464 688 h 96 v 96 h -96 z M 464 240 h 96 v 384 h -96 z" fill="#ff4d4f"/>
            </svg>
            <h4>连接失败</h4>
            <p>无法连接到RAGflow服务</p>
            <small>请检查RAGflow服务是否正常运行</small>
            <small class="error-url">{{ ragflowUrl }}</small>
            <button class="retry-btn" @click="retryConnection">重试连接</button>
          </div>

          <iframe
            v-show="!isLoading && !hasError"
            ref="ragflowIframe"
            :src="ragflowUrl"
            class="ragflow-iframe"
            frameborder="0"
            @load="onIframeLoad"
            @error="onIframeError"
          ></iframe>
        </div>

        <!-- 快捷操作栏 -->
        <div class="panel-footer">
          <button class="footer-btn" @click="refreshIframe" title="刷新">
            <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
              <path d="M 168 504.2 c 1 -43.7 10 -86.1 26.9 -126 C 232.7 326.2 286 286 347.9 264.4 C 398.8 247.1 451.9 239.9 503.3 242.9 L 446.5 185.5 l 50.5 -50.5 l 134.4 134.4 l -134.4 134.4 l -50.5 -50.5 l 56.9 -56.9 C 418.9 293.4 336 352 304 444.6 c -11.7 34 -17.3 70.1 -18.1 106.1 l -61 -1.7 c -0.4 -15.1 -0.2 -30.2 0.6 -45.3 z m 688 14 c -1 43.7 -10 86.1 -26.9 126 c -37.8 52 -91.1 92.2 -153 113.8 c -50.9 17.3 -104 24.5 -155.4 21.5 l 56.8 57.2 l -50.5 50.5 L 393.6 752.8 l 134.4 -134.4 l 50.5 50.5 l -56.9 56.9 c 84.5 3 167.4 -55.6 199.4 -148.2 c 11.7 -34 17.3 -70.1 18.1 -106.1 l 61 1.7 c 0.4 15.1 0.2 30.2 -0.6 45.3 z" fill="currentColor"/>
            </svg>
            刷新
          </button>
          <button class="footer-btn" @click="openInNewTab" title="新窗口打开">
            <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
              <path d="M 853.333333 469.333333 v 341.333334 a 85.333333 85.333333 0 0 1 -85.333333 85.333333 H 256 a 85.333333 85.333333 0 0 1 -85.333333 -85.333333 V 298.666667 a 85.333333 85.333333 0 0 1 85.333333 -85.333334 h 341.333333 v 85.333334 H 256 v 512 h 512 V 469.333333 h 85.333333 z m 0 -298.666666 v 213.333333 h -85.333333 V 256 L 524.8 499.2 l -60.8 -60.8 L 707.2 195.2 H 597.333333 V 170.666667 h 256 z" fill="currentColor"/>
            </svg>
            新窗口
          </button>
        </div>
      </div>
    </transition>

    <!-- 最小化状态的小图标 -->
    <transition name="fade">
      <div 
        v-if="isMinimized" 
        class="minimized-icon"
        @click="restorePanel"
      >
        <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
          <path d="M 512 64 C 264.6 64 64 264.6 64 512 s 200.6 448 448 448 s 448 -200.6 448 -448 S 759.4 64 512 64 z" fill="#1890ff"/>
        </svg>
        <span class="badge" v-if="hasNewMessage">1</span>
      </div>
    </transition>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue';

// Props配置
const props = defineProps({
  // RAGflow服务地址
  baseUrl: {
    type: String,
    default: 'http://localhost'
  },
  // RAGflow共享ID
  sharedId: {
    type: String,
    default: 'ec1da38caef211f088ef72ae004f33d4'
  },
  // 认证Token
  authToken: {
    type: String,
    default: 'Y3NjMyMmJhYjNmOTExZjBiMGY2MzJhNz'
  },
  // 语言设置
  locale: {
    type: String,
    default: 'zh'
  },
  // 初始位置（right, left, bottom-right, bottom-left）
  position: {
    type: String,
    default: 'bottom-right'
  }
});

// 状态管理
const isOpen = ref(false);
const isMinimized = ref(false);
const isLoading = ref(false);
const hasError = ref(false);
const hasNewMessage = ref(false);
const loadTimeout = ref(null);
const ragflowIframe = ref(null);

// 计算RAGflow URL
const ragflowUrl = computed(() => {
  const params = new URLSearchParams({
    shared_id: props.sharedId,
    from: 'chat',
    auth: props.authToken,
    locale: props.locale
  });
  return `${props.baseUrl}/next-chats/share?${params.toString()}`;
});

// 切换面板
const togglePanel = () => {
  isOpen.value = !isOpen.value;
  isMinimized.value = false;
  
  if (isOpen.value) {
    isLoading.value = true;
    hasError.value = false;
    startLoadTimeout();
  }
};

// 关闭面板
const closePanel = () => {
  isOpen.value = false;
  isMinimized.value = false;
  clearLoadTimeout();
};

// 最小化面板
const minimizePanel = () => {
  isOpen.value = false;
  isMinimized.value = true;
};

// 恢复面板
const restorePanel = () => {
  isOpen.value = true;
  isMinimized.value = false;
  hasNewMessage.value = false;
};

// 刷新iframe
const refreshIframe = () => {
  if (ragflowIframe.value) {
    isLoading.value = true;
    hasError.value = false;
    ragflowIframe.value.src = ragflowUrl.value;
    startLoadTimeout();
  }
};

// 新窗口打开
const openInNewTab = () => {
  window.open(ragflowUrl.value, '_blank');
};

// 重试连接
const retryConnection = () => {
  hasError.value = false;
  isLoading.value = true;
  refreshIframe();
};

// 开始加载超时计时
const startLoadTimeout = () => {
  clearLoadTimeout();
  loadTimeout.value = setTimeout(() => {
    if (isLoading.value) {
      console.error('RAGflow连接超时:', ragflowUrl.value);
      hasError.value = true;
      isLoading.value = false;
    }
  }, 15000); // 15秒超时
};

// 清除超时计时
const clearLoadTimeout = () => {
  if (loadTimeout.value) {
    clearTimeout(loadTimeout.value);
    loadTimeout.value = null;
  }
};

// iframe加载成功
const onIframeLoad = () => {
  console.log('RAGflow iframe加载成功');
  isLoading.value = false;
  hasError.value = false;
  clearLoadTimeout();
};

// iframe加载失败
const onIframeError = (error) => {
  console.error('RAGflow iframe加载失败:', error);
  isLoading.value = false;
  hasError.value = true;
  clearLoadTimeout();
};

// 组件卸载时清理
onUnmounted(() => {
  clearLoadTimeout();
});
</script>

<style scoped lang="less">
.ai-report-floating {
  position: fixed;
  z-index: 9999;
}

/* 悬浮图标 */
.floating-icon {
  position: fixed;
  bottom: 140px;
  right: 24px;
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 50%;
  box-shadow: 0 4px 20px rgba(102, 126, 234, 0.4);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  animation: float 3s ease-in-out infinite;

  &:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 30px rgba(102, 126, 234, 0.6);
  }

  &.active {
    transform: scale(0.95);
  }

  .icon-svg {
    width: 32px;
    height: 32px;
    fill: white;
  }

  .floating-text {
    margin-top: 2px;
    font-size: 10px;
    color: white;
    font-weight: 500;
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* AI报表面板 */
.ai-report-panel {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 450px;
  height: 650px;
  background: white;
  border-radius: 16px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 面板头部 */
.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;

  .header-left {
    display: flex;
    align-items: center;
    gap: 12px;

    .header-icon {
      width: 40px;
      height: 40px;
      fill: white;
    }

    .header-title {
      h3 {
        margin: 0;
        font-size: 16px;
        font-weight: 600;
      }

      p {
        margin: 2px 0 0 0;
        font-size: 12px;
        opacity: 0.9;
      }
    }
  }

  .header-actions {
    display: flex;
    gap: 8px;

    .action-btn {
      width: 32px;
      height: 32px;
      border: none;
      background: rgba(255, 255, 255, 0.2);
      border-radius: 50%;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s;
      color: white;

      svg {
        width: 16px;
        height: 16px;
      }

      &:hover {
        background: rgba(255, 255, 255, 0.3);
        transform: scale(1.1);
      }

      &.close-btn:hover {
        background: rgba(255, 77, 79, 0.8);
      }
    }
  }
}

/* 面板内容 */
.panel-content {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: #f5f5f5;

  .ragflow-iframe {
    width: 100%;
    height: 100%;
    border: none;
  }

  .loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 16px;

    .loading-spinner {
      width: 50px;
      height: 50px;
      border: 4px solid #f0f0f0;
      border-top: 4px solid #667eea;
      border-radius: 50%;
      animation: spin 1s linear infinite;
    }

    p {
      color: #666;
      font-size: 14px;
      margin: 0;
    }

    small {
      color: #999;
      font-size: 12px;
      max-width: 80%;
      text-align: center;
      word-break: break-all;
    }
  }

  .error-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 12px;
    padding: 20px;

    .error-icon {
      width: 60px;
      height: 60px;
    }

    h4 {
      color: #ff4d4f;
      margin: 0;
      font-size: 18px;
    }

    p {
      color: #666;
      margin: 0;
      font-size: 14px;
    }

    small {
      color: #999;
      font-size: 12px;
      text-align: center;

      &.error-url {
        max-width: 90%;
        word-break: break-all;
        background: #f5f5f5;
        padding: 8px;
        border-radius: 4px;
        font-family: monospace;
      }
    }

    .retry-btn {
      margin-top: 16px;
      padding: 10px 24px;
      background: #667eea;
      color: white;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      font-size: 14px;
      transition: all 0.2s;

      &:hover {
        background: #5568d3;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
      }
    }
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* 面板底部 */
.panel-footer {
  display: flex;
  border-top: 1px solid #e8e8e8;
  background: white;

  .footer-btn {
    flex: 1;
    padding: 12px;
    border: none;
    background: white;
    color: #666;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 13px;
    transition: all 0.2s;
    border-right: 1px solid #e8e8e8;

    &:last-child {
      border-right: none;
    }

    svg {
      width: 16px;
      height: 16px;
    }

    &:hover {
      background: #f5f5f5;
      color: #667eea;
    }
  }
}

/* 最小化图标 */
.minimized-icon {
  position: fixed;
  bottom: 80px;
  right: 24px;
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 50%;
  box-shadow: 0 4px 16px rgba(102, 126, 234, 0.4);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;

  &:hover {
    transform: scale(1.1);
  }

  svg {
    width: 28px;
    height: 28px;
    fill: white;
  }

  .badge {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 20px;
    height: 20px;
    background: #ff4d4f;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
    border: 2px solid white;
  }
}

/* 动画 */
.slide-up-enter-active,
.slide-up-leave-active {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.slide-up-enter-from {
  opacity: 0;
  transform: translateY(20px);
}

.slide-up-leave-to {
  opacity: 0;
  transform: translateY(20px);
}

.fade-enter-active,
.fade-leave-active {
  transition: all 0.3s;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
  transform: scale(0.8);
}

/* 响应式 */
@media (max-width: 768px) {
  .ai-report-panel {
    width: 100%;
    height: 100%;
    bottom: 0;
    right: 0;
    border-radius: 0;
  }

  .floating-icon {
    bottom: 80px;
    right: 16px;
    width: 56px;
    height: 56px;
  }
}
</style>

